<template>
    <div>
        <div class="text-xl ">【折线图】</div>
        <div ref="chart" class="w-full h-full"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, markRaw } from 'vue'
import 'echarts-wordcloud'
// import '@/utils/echarts-wordcloud.min.js'
let mychart = null
const chart = ref(null)
const props = defineProps(['data'])
console.log(props.data);



const initChart = () => {
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
            },
            valueFormatter: value => value + '°C',
        },

        xAxis: {
            // name: '地区',
            type: 'category',
            data: props.data.datas.map(i => i.name).slice(0, 5),
            axisLabel: {
                color: '#fff',
                interval: 0
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "#fff"
                },

            },
            nameTextStyle: {
                color: '#fff'
            }
        },
        yAxis: [
            {
                name: '温度/°C',
                type: 'value',
                position: 'left',
                // data: props.data.datas.map(i => i.value).slice(0, 5),
                axisTick: {
                    show: true,
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#fff"
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                nameTextStyle: {
                    color: '#fff'
                },
                alignTicks: true
            },
            {
                name: '湿度/%',
                type: 'value',
                position: 'right',
                // data: props.data.datas.map(i => i.value).slice(5, 10),
                axisTick: {
                    show: true,
                },
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#fff"
                    }
                },
                axisLabel: {
                    color: '#fff'
                },
                nameTextStyle: {
                    color: '#fff'
                },
                alignTicks: true
            }
        ],
        series: [
            {
                name: '温度',
                type: 'line',
                data: props.data.datas.map(i => ({ value: i.value, name: i.name })).slice(0, 5),
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: value => value + '°C',
                },
                yAxisIndex: 1,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                    valueFormatter: value => value + '°C',
                },
            },
            {
                name: '湿度',
                type: 'line',
                data: props.data.datas.map(i => ({ value: i.value, name: i.name })).slice(5, 10),
                tooltip: {
                    trigger: 'axis',
                    valueFormatter: value => value + '%',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                    },
                    valueFormatter: value => value + '%',
                },
            }
        ],
        grid: {
            top: 40,
            left: 0,
            right: 40,
            bottom: 0,
            containLabel: true
        },
    }
    mychart = markRaw(echarts.init(chart.value))
    mychart.setOption(option)
}
onMounted(() => {
    Promise.resolve().then(() => {
        initChart()
    })
})
window.addEventListener('resize', () => {
    mychart.resize()
})
</script>

<style lang="scss" scoped></style>